<!--
 * @Date: 2023-05-05 19:49:19
 * @LastEditTime: 2023-05-06 16:33:31
 * @FilePath: /nlk/src/views/topUpCoinHelp/topUpCoinHelp.vue
 * 介绍:
-->
<script lang="ts" setup>
import { apiTopUpCoinTxid } from "@@/api/module/transaction";
import { useRpickerRef } from "@@/components/rework/Rpicker";
import toast from "@@/hooks/toast";
import useBalanceStore, { StoreCoinItem } from "@@/store/useBalanceStore";
import { _require } from "@@/utils/tools/tools";
import { showDialog } from "vant";

const { t } = useI18n();
const balanceStore = useBalanceStore();
const fromData = reactive({
  txid: "",
  amount: "",
});
async function paste() {
  fromData.txid = await window.navigator.clipboard.readText();
}
const btnLoading = reactive({
  submitBtn: false,
});
const currentCoin = computed(
  () => balanceStore.ethCoinEnum[RpickerRef.value?.elect.code.toUpperCase()!]
);
function submitBtn() {
  const coin = currentCoin.value;
  const number = Number(fromData.amount);
  if (!coin) return toast.text(t("bu-zhi-chi-de-bi-zhong"));
  if (!number) return toast.text(t("qing-shu-ru-chong-zhi-shu-liang"));
  if (!fromData.txid) return toast.text(t("qing-shu-ru-jiao-yi-ha-xi"));

  showDialog({
    title: t("qing-que-ren"),
    message: t("ruo-shu-ru-cuo-wu-bu-yu-dao-zhang"),
  }).then(async () => {
    btnLoading.submitBtn = true;
    await apiTopUpCoinTxid({
      txid: fromData.txid,
      chainId: 56,
      coin_id: coin.id,
      number: number,
    });
    btnLoading.submitBtn = false;
  });
}
const pickerData = computed(
  () => Object.values(balanceStore.ethCoinEnum) as StoreCoinItem[]
);

const RpickerRef = useRpickerRef<StoreCoinItem>();
</script>
<template>
  <CpageView class="topUpCoinHelp">
    <h3 class="C-fail">{{ $t("zhu") }}</h3>
    <ul class="T-S-sm">
      <li>
        {{
          $t(
            "yin-wei-qu-kuai-jie-dian-wang-luo-bo-dong-huo-zhe-yi-xie-bu-ke-kang-li-yin-su-dao-zhi-de-qu-kuai-ding-dan-diu-shi-neuralink-kai-fa-zhe-tuan-dui-zheng-zai-jin-liang-du-jue-ci-xian-xiang-de-fa-sheng-jin-guan-zhe-zhi-shi-ji-shao-shu"
          )
        }}
      </li>
      <li>
        {{
          $t("ci-ye-mian-jin-yong-yu-chong-bi-gong-neng-de-ding-dan-diu-shi-0")
        }}
      </li>
      <li>
        {{
          $t(
            "zhi-neng-he-yue-jiang-hui-dui-nin-shu-ru-de-shu-ju-jin-hang-xiao-yan-ruo-shu-ru-you-wu-jiang-wu-fa-ji-huo-he-yue-dao-zhang"
          )
        }}
      </li>
    </ul>
    <h3 class="MT-md">{{ $t("ru-he-zhao-hui-wo-de-ding-dan") }}</h3>
    <ul>
      <li>
        {{ $t("zhao-dao-nin-de-chong-zhi-ji-lu-bing-dian-ji") }}
        <Rimage
          class="MT-sm"
          width="100%"
          :src="_require('src/assets/images/help/topUpCoin_1.png')"
        />
      </li>
      <li>
        {{
          $t(
            "fu-zhi-nin-de-jiao-yi-ha-xi-bing-ji-zhu-nin-de-zhi-fu-jineyu-bi-zhong-ming-cheng"
          )
        }}
        <Rimage
          class="MT-sm"
          width="100%"
          :src="_require('src/assets/images/help/topUpCoin_2.png')"
        />
      </li>
    </ul>
    <p>{{ $t("jiang-shang-shu-xin-xi-shu-ru-zhi-biao-dan") }}</p>
    <Ccard class="MT-md border-dashed" bg="var(--C-B2)">
      <Rinput
        v-model="fromData.txid"
        :label="$t('ha-xi')"
        :placeholder="$t('chang-an-ci-chu-nian-tie')"
        border="bottom"
      >
        <!-- <template #button>
          <Rbutton @click="paste" :size="'small'">
            {{ $t("nian-tie") }}
          </Rbutton>
        </template> -->
      </Rinput>
      <Rinput
        v-model="fromData.amount"
        :label="$t('shu-liang-0')"
        type="number"
        :placeholder="$t('qing-shu-ru')"
        border="bottom"
      >
      </Rinput>
      <Rinput :label="$t('bi-zhong-0')" border="bottom">
        <template #input>
          <Rpicker
            class="Rpicker flex-A-C flex-J-SB"
            ref="RpickerRef"
            :picker-data="pickerData"
          >
            <template #left-content>
              <div class="flex-A-C">
                <Rimage size="1.5em" :src="RpickerRef?.elect.logo" />
                <div class="ML-xs">{{ RpickerRef?.elect.code }}</div>
              </div>
            </template>
            <template #option="{ code, logo }: StoreCoinItem">
              <div class="flex-A-C flex-J-SB" style="width: 5em">
                <Rimage size="1.2em" :src="logo" />
                <div class="T-A-C" style="width: 3em">{{ code }}</div>
              </div>
            </template>
          </Rpicker>
        </template>
      </Rinput>
    </Ccard>
    <Rbutton
      @click="submitBtn"
      :loading="btnLoading.submitBtn"
      class="MT-xxl"
      bg="var(--C-success)"
      :size="'large'"
      >{{ $t("ti-jiao") }}</Rbutton
    >
    <p class="C-fail MT-xxl T-S-sm T-A-C">
      {{ $t("zhi-neng-he-yue-xu-yao-shi-jian-que-ren-qing-nai-xin-deng-hou") }}
    </p>
    <div style="height: 300rem"></div>
  </CpageView>
</template>
<style lang="less" scoped>
.topUpCoinHelp {
  line-height: 1.5em;
}
.border-dashed {
  border: dashed 1rem var(--C-T1);
}
.Rpicker {
  min-width: 100%;
}
</style>
